<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import * as echarts from 'echarts/core';
  import { data } from 'jquery';
  const props = defineProps({
    data1: { type: Object as () => any, required: true },
    data2: { type: Object as () => any, default: [] },
    data3: { type: Object as () => any, default: [] },
    datax: { type: Object as () => any, required: true },
    title: { type: String, default: '' },
    dataName: { type: Object as () => any, default: [] },
    max: { type: Number, default: 100 },
    min: { type: Number, default: 0 },
    other: { type: Object as () => any, default: [] },
    yname: { type: String, default: '' },
  });

  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;

  const option = ref<any>({
    title: {
      text: props.title, // 图表标题
      left: 'center', // 标题居中
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
      },
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      data: props.dataName ?? [], // 对应 series 的 name，按需修改
      top: '15%', // 图例位置
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
      backgroundColor: 'rgba(22, 27, 88, 0.90)',
      borderColor: 'rgba(65, 164, 230, 1)',
      borderWidth: 1,
      textStyle: {
        color: '#FFFFFF',
        fontSize: 14,
        fontWeight: 400,
        align: 'left',
      },
      padding: 10,
      extraCssText: 'text-align:left',
      appendToBody: true,
      position: function (point: any) {
        return [point[0], point[1] + 20];
      },
    },
    grid: { left: '4%', right: '4%', bottom: '8%', containLabel: true },
    xAxis: {
      type: 'category',
      data: props.datax ?? [], // X 轴类目
      axisLine: { lineStyle: { color: '#fff' } },
      axisLabel: { color: '#fff', fontSize: '10px' },
    },
    yAxis: {
      type: 'value',
      name: props.yname ?? '',
      nameTextStyle: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } },
      axisLabel: { color: '#fff' },
      // scale: true,
      min: props.min,
      max: props.max,
      splitLine: { show: true, lineStyle: { type: 'dotted' } },
    },
    series: [
      {
        name: props.dataName.length > 0 ? props.dataName[0] : '',
        type: 'line',
        data: props.data1 ?? [],
        smooth: true,
        itemStyle: { color: '#1E8EEC' },
        label: {
          color: '#fff',
          show: true,
          position: 'top',
          formatter: '{c}%',
        },
        lineStyle: {
          width: 1.5,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(30, 142, 236, 0.6)' },
            { offset: 1, color: 'rgba(30, 142, 236, 0.1)' },
          ]),
        },
      },
      {
        name: props.dataName.length > 1 ? props.dataName[1] : '',
        type: 'line',
        data: props.data2 ?? [],
        itemStyle: { color: '#00eaff' },
        label: {
          color: '#fff',
          show: true,
          position: 'top',
          // formatter: '{c}%',
          // 移除阴影
          textShadowBlur: 0,
          textShadowColor: 'transparent',
          // 移除描边
          textBorderWidth: 0, // 关键：将描边宽度设为0
          textBorderColor: 'transparent',
        },
      },
      {
        name: props.dataName.length > 2 ? props.dataName[2] : '',
        type: 'line',
        data: props.data3 ?? [],
        itemStyle: { color: '#6A5ACD' },
        label: {
          color: '#fff',
          show: true,
          position: 'top',
          // formatter: '{c}%',
          // 移除阴影
          textShadowBlur: 0,
          textShadowColor: 'transparent',
          // 移除描边
          textBorderWidth: 0, // 关键：将描边宽度设为0
          textBorderColor: 'transparent',
        },
      },
    ],
  });

  const initCharts = () => {
    try {
      formatterOption();
      if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance?.setOption(option.value, true);
      }
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  };

  const updateChart = () => {
    formatterOption();
    option.value.series[0].data = props.data1 ?? [];
    option.value.xAxis.data = props.datax ?? [];
    chartInstance?.setOption(option.value, true);
    handleResize();
  };

  const formatterOption = () => {
    const series = [];
    series.push(option.value.series[0]);
    if (props.data2 && props.data2.length > 0) {
      option.value.series[1].data = props.data2 ?? [];
      series.push(option.value.series[1]);
    }
    if (props.data3.length > 0) {
      option.value.series[2].data = props.data3 ?? [];
      series.push(option.value.series[2]);
    }
    option.value.series = [];
    option.value.series = series;
    option.value.legend.data = props.dataName.length > 1 ? props.dataName : [];
    option.value.title.text = props.title;
  };

  // 窗口大小变化处理
  const handleResize = () => {
    nextTick(() => {
      chartInstance?.resize();
    });
  };

  onMounted(() => {
    setTimeout(() => {
      initCharts();
    }, 1000);

    // 添加窗口大小变化监听
    window.addEventListener('resize', updateChart);
  });

  onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', updateChart);
    chartInstance?.dispose();
  });

  watch(
    () => [props.datax, props.data1],
    () => updateChart(),
    { deep: true }
  );

  defineExpose({
    updateChart, // 暴露方法到父组件
    chartRef,
  });
</script>
<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>
